import React, { useEffect,useState } from "react";
import { Button,Modal,Form,Radio,Input,Select } from "antd";
import { update } from "../../services/student";
import { find } from "../../services/class";

function Update(props) {
    // const handleUpdate = async () => {
    //     console.log(props.student);
    //     await update(props.student);
    //     props.show();
    // }
    const [form] = Form.useForm();
    
    const [classes,setClasses] = useState([]);
    const handleOk = async () => {
        try{
            let values = await form.validateFields();
            console.log("values",values)
            await update({_id:props.student._id,...values});
            props.show();
            props.setIsUpdateOpen(false);
        }catch(e){
            console.log("验证失败",e);
        }
        
    };
    const handleCancel = () => {
        props.setIsUpdateOpen(false);
    };
    
    console.log(props)
    useEffect(() => {
        if(props.isUpdateOpen){
            const fetchClasses = async () => {
                let data = await find();
                setClasses(data.map(item => ({label:item.name,value:item._id})));
            };
            fetchClasses();
            form.setFieldsValue(props.student);
        }
    },[props.isUpdateOpen]);
   
    return (
        <div>
           <Modal
                title="修改"
                open={props.isUpdateOpen}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                form={form}
                name="update"
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 20,
                }}
                autoComplete="off"
            >
                <Form.Item
                    label="姓名"
                    name="name"
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: "请输入姓名",
                        }
                       
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="年龄"
                    name="age"
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: "请输入年龄",
                        },
                    ]}
                >
                    <Input />
                    
                </Form.Item>
                <Form.Item
                    label="性别"
                    name="gender"
                >
                    <Radio.Group >
                        <Radio value="男">男</Radio>
                        <Radio value="女">女</Radio>

                    </Radio.Group>
                </Form.Item>
                <Form.Item label="选择班级" name="classes">
                        <Select
                            style={{ width: 120 }}
                            options={classes}
                        />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default Update;
